<template>
	<view class="page">
		<!-- #ifdef H5 -->
		<!-- vidojs -->
		<view class="video-js video" ref="video"></view>
		<view class="fanhan" @tap="Backvue">
			<image src="/static/arrow-left.png" style="width: 30px;height: 30px;"></image>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-VUE -->
		<view class="video">
			<view style="color: white;">我是App</view>
		</view>
		<!-- #endif -->
		<view class="content">
			<u-section style="margin-top: 40rpx; margin-bottom: 20rpx; margin-left: 20rpx; " title="影视信息"  :right="false" :show-line="false"></u-section>
			<u-line color="#46afec"/>
			<VideoInfo :videoitem="videoitem"></VideoInfo>
			<VideoGrid @change="VideoGridTap" :videoGridlist="videoGridlist"></VideoGrid>
			<VideoXuanji
			title="选集"
			:curlvideoIndex="curlvideoIndex"
			:scrollviewitem="scrollviewitem"
			:videojishuURL="VideoPlayFrom[curlPlayFromIndex].videolist"
			:videoitem="videoitem"
			@change="videojiTap"
			></VideoXuanji>
			<VideoXuanYuan
			title="选源"
			:curlPlayFromIndex="curlPlayFromIndex"
			:scrollviewitem="scrollviewYuanitem"
			:PlayFromlist="PlayFromlist"
			@change="videoPlayfromTap"
			></VideoXuanYuan>
			<view class="ly">
				<u-form :model="form" ref="uForm" >
					<u-form-item label="" prop="intro" right-icon='edit-pen' :leftIconStyle="{color: '#c0c4cc', fontSize: '32rpx'}" left-icon="account" >
						<u-input v-model="form.intro"/>
					</u-form-item>
				</u-form>
			</view>
		</view>
	</view>
	
</template>

<script>
	// 引入视频播放页用到的ICONS图标静态数据
	import {videoGrid_data} from '@/assets/js/videoGrid/Data.js'
	// videoInfo视频基本信息
	import VideoInfo from './components/VideoInfo/VideoInfo.vue'
	// VideoGrid视频页通用分享、收藏、追剧、下载等icons宫格按钮
	import VideoGrid from './components/VideoGrid/VideoGrid.vue'
	// VideoXuanji视频选集
	import VideoXuanji from './components/VideoXuanji/VideoXuanji.vue'
	// VideoXuanYuan视频选源[播放源分类]
	import VideoXuanYuan from './components/VideoXuanYuan/VideoXuanYuan.vue'
	//导入播放视频前的操作，如自动解密每一集等
	import TXvideo from './mixins/TXvideo.js'
	import PlaylogVideo from './mixins/common/playlog/playlog.js'
	import qtzyTXvideo from './mixins/qitazy/qtzyTXvideo.js'
	// #ifdef H5
	import H5video from './mixins/vue/h5video.js'
	// #endif
	export default {
		mixins:[
			TXvideo,
			qtzyTXvideo,
			PlaylogVideo,
			// #ifdef H5
			H5video,
			// #endif
		],
		components:{
			VideoInfo,
			VideoGrid,
			VideoXuanji,
			VideoXuanYuan
		},
		data() {
			return {
				videoGridlist:videoGrid_data,
				curlvideoIndex:0,//当前选中的集数
				scrollviewitem:'item0',//[选集]当前scoll-view的位置，属性scroll-into-view
				scrollviewYuanitem:'item0',//[选源]
				curlPlayFromIndex:0,//当前选中的播放源
				form:{
					name: '',
					intro: '',
				},
				rules: {
					name:[
						{ 
							required: true, 
						    message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介不能少于5个字', 
							trigger: 'change'
						}
					]
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page{}
.video{
	width: 750rpx;
	height: 420rpx;
	position: relative;
	background-color: #303133;
}
.content{
	width: 98%;
	margin: auto;
}
.ly{
	position: absolute;
	bottom: 0;
	width: 92%;
	height: 60px;
	clear: both;
	margin: auto;
	left: 4%;
}
.fanhan{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    width: 35px;
    height: 35px;
    border-radius: 25px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 15px;
    left: 15px;
}
</style>
